<template>
  <el-container>
    <!-- 左侧 -->
    <el-aside :width="isCollapse ? '64px' : '200px'">
      <div class="menuTitle">影客管理</div>
      <el-menu :default-active='currentRouter' class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
        background-color="#334157" text-color="#fff" style="border-right: 0px;" :unique-opened="true"
        :collapse="isCollapse" :collapse-transition="false"
        :router="true"
        >
        <el-sub-menu index="1">
          <template #title>
            <el-icon>
              <House />
            </el-icon>
            <span>用户管理</span>
          </template>

          <el-menu-item index="/dashboard/user"> <el-icon>
              <Position />
            </el-icon>用户管理</el-menu-item>

          <el-menu-item index="/dashboard/activity"><el-icon>
              <Position />
            </el-icon>市场活动</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="2">
          <template #title>
            <el-icon>
              <House />
            </el-icon>
            <span>线索管理</span>
          </template>

          <el-menu-item index="/dashboard/clue"> <el-icon>
              <Position />
            </el-icon>线索管理</el-menu-item>

       
        </el-sub-menu>
        <el-sub-menu index="3">
          <template #title>
            <el-icon>
              <location />
            </el-icon>
            <span>客户管理</span>
          </template>

          <el-menu-item index="/dashboard/customer"><el-icon>
              <Position />
            </el-icon>客户管理</el-menu-item>

        </el-sub-menu>
      </el-menu>
    </el-aside>

    <!-- 右侧 -->
    <el-container class="leftcontainer">
      <!-- 右侧头部 -->
      <el-header><el-icon class="iconhead" @click="expandMenu">
          <Fold />
        </el-icon>
        <el-dropdown>
          <span class="el-dropdown-link">
            {{ user.name }}
            <el-icon class="el-icon--right">
              <arrow-down />
            </el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>我的资料</el-dropdown-item>
              <el-dropdown-item>修改密码</el-dropdown-item>
              <el-dropdown-item divided @click="logout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </el-header>

      <!-- 右侧主体 -->
      <el-main>
        <router-view v-if="isRouterActive"></router-view>
      </el-main>

      <!-- 右侧底部 -->
      <el-footer>Footer</el-footer>
    </el-container>
  </el-container>
</template>

<script>
import { defineComponent } from 'vue';
import Request from '../http/Request';
import router from '../router/router.js'
import utils from '../utils/utils.js'
export default defineComponent({
  name: 'dashboard',
  data() {
    return {
      isCollapse: false,
      user: {

      },
       isRouterActive: true,
      currentRouter: this.$route.path
    };
  },
  methods: {
    expandMenu() {
      this.isCollapse = !this.isCollapse;
    },
    loginUser() {
      // console.log(this);

      Request.doGet("/api/login/info").then(res => {
        this.user = res.data;
        console.log(this.user);
      })
    },
    logout() {
      Request.doGet("/api/logout", {}).then(res => {
        if (res.code == 200) {
          utils.removeToken();
          // window.location.href = "/";
          this.$router.push("/");
          this.$message.success("退出成功");
    
        } else {
          this.$message.error("退出失败");
      
        }
      })
    }
  },
//提供函数：解释：当子组件调用reload函数时，父组件会重新渲染
  // reload() {
  //   this.isRouterActive = false;
  //   this.$nextTick(function () {
  //     this.isRouterActive = true;
  //   })
  // }
  // provide() {
  //   return {
  //     reload: ()=>{
  //       this.isRouterActive = false;
  //       this.$nextTick(function () {
  //         this.isRouterActive = true;
  //       })
  //     }

  //   }
  // },
  // watch: {
  //   $route(to, from) {
  //     this.isRouterActive = false;
  //     this.$nextTick(function () {
  //       this.isRouterActive = true;
  //     })
  //   }
  // }
  // ,
  mounted() {
    // console.log(this);
    this.loginUser();
  }
})

</script>

<style scoped>
.el-aside {
  background: #1a1a1a;
}

.el-header {
  background: #d0e4db;
  height: 35px;
  line-height: 35px;
}

.el-main {
  background: white;
}

.el-footer {
  background: #42043d;
  height: 35px;
  text-align: center;
  line-height: 35px;
}

.leftcontainer {
  height: calc(100vh);
}

.menuTitle {
  color: white;
  font-size: 20px;
  text-align: center;
  height: 35px;
  line-height: 35px;
}

.iconhead {
  cursor: pointer;
}

.el-dropdown {
  float: right;
  line-height: 35px;

}
</style>